<template>
  <a-tabs :size="size" v-model:activeKey="activeKey">
    <a-tab-pane key="baseConfig" tab="基本配置">
      <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-row>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="value">
            <a-form-item label="节点名称">
              <a-input :size="size" :defaultValue="cell.value" @change="(e) => (cell.value = e.target.value)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="nodeVariableName">
            <a-form-item label="节点变量">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'nodeVariableName')"
                @change="(e) => setCellValue(props, 'nodeVariableName', e)"
                placeholder="请输入节点变量，默认为(resp)"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="loopVariableName">
            <a-form-item label="循环变量">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'loopVariableName')"
                @change="(e) => setCellValue(props, 'loopVariableName', e)"
                placeholder="请输入循环变量"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="loopCount">
            <a-form-item label="循环次数">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'loopCount')"
                @change="(e) => setCellValue(props, 'loopCount', e)"
                placeholder="请输入循环次数"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="pageLoadTimeout">
            <a-form-item label="页面加载超时时间">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'pageLoadTimeout')"
                @change="(e) => setCellValue(props, 'pageLoadTimeout', e)"
                placeholder="请输入页面加载超时时间"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="implicitlyWaitTimeout">
            <a-form-item label="元素获取超时时间">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'implicitlyWaitTimeout')"
                @change="(e) => setCellValue(props, 'implicitlyWaitTimeout', e)"
                placeholder="请输入元素获取超时时间"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="驱动类型">
              <a-select
                :size="size"
                :defaultValue="getCellValue(props, 'driverType', 'jvppeteer')"
                @change="(val) => setCellValue(props, 'driverType', val)"
              >
                <a-select-option value="jvppeteer">jvppeteer</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 16 : 24" ref="url">
            <a-form-item label="URL" :labelCol="{ span: direction == 'bottom' ? 2 : 5 }" :wrapperCol="{ span: direction == 'bottom' ? 21 : 17 }">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'url')"
                @change="(e) => setCellValue(props, 'url', e)"
                placeholder="请输入起始url"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="proxy">
            <a-form-item label="代理">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'proxy')"
                @change="(e) => setCellValue(props, 'proxy', e)"
                placeholder="host:port"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 8 : 24">
            <a-form-item label="请求设置" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <SpiderSelect :editor="editor" :cell="cell" :options="requestConfig" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 8 : 24" ref="otherConfig">&nbsp;</a-col>
        </a-row>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="paramsConfig" tab="参数">
      <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-row>
          <a-col :span="direction == 'bottom' ? 16 : 24" ref="window-size">
            <a-form-item label="窗口大小">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'window-size')"
                @change="(e) => setCellValue(props, 'window-size', e)"
                placeholder="1366,768"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 16 : 24" ref="user-agent">
            <a-form-item label="User-Agent">
              <a-input :size="size" :defaultValue="getCellValue(props, 'user-agent')" @change="(e) => setCellValue(props, 'user-agent', e)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 16 : 24">
            <a-form-item label="驱动参数">
              <spider-select :editor="editor" :cell="cell" :options="requestParams" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 16 : 24">
            <a-form-item label="arguments">
              <a-textarea
                :size="size"
                :defaultValue="getCellValue(props, 'arguments')"
                @change="(e) => setCellValue(props, 'arguments', e)"
                placeholder="一行一个"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import SpiderSelect from '../components/spiderSelect.vue';
  import { setCellValue, getCellValue } from '../utils/tools';
  const props = defineProps({
    direction: { type: String, default: 'bottom' },
    cell: { type: Object },
    editor: { type: Object },
  });
  const size = ref('small');
  const formItemLayout = reactive({
    labelCol: { span: 5 },
    wrapperCol: { span: 17 },
    colSpan: 8,
  });
  const activeKey = ref('baseConfig');
  const requestConfig = ref([
    {
      label: '自动管理Cookie',
      value: 'cookie-auto-set',
      defaultVal: '1',
    },
  ]);
  const requestParams = ref([
    {
      label: '无头模式',
      value: 'headless',
      defaultVal: '0',
    },
    {
      label: '禁用JS',
      value: 'javascript-disabled',
      defaultVal: '0',
    },
    {
      label: '禁用图片',
      value: 'image-disabled',
      defaultVal: '0',
    },
    {
      label: '禁用插件',
      value: 'plugin-disable',
      defaultVal: '1',
    },
    {
      label: '禁用Java',
      value: 'java-disable',
      defaultVal: '1',
    },
    {
      label: '隐身模式',
      value: 'incognito',
      defaultVal: '0',
    },
    {
      label: '沙盒模式',
      value: 'sandbox',
      defaultVal: '0',
    },
    {
      label: '隐藏滚动条',
      value: 'hide-scrollbar',
      defaultVal: '0',
    },
    {
      label: '最大化',
      value: 'maximized',
      defaultVal: '0',
    },
    {
      label: '单进程模式',
      value: 'single-process',
      defaultVal: '0',
    },
  ]);
  const value = ref();
  const nodeVariableName = ref();
  const loopVariableName = ref();
  const loopCount = ref();
  const pageLoadTimeout = ref();
  const implicitlyWaitTimeout = ref();
  const url = ref();
  const proxy = ref();
  const otherConfig = ref();

  defineExpose({
    activeKey,
    value,
    nodeVariableName,
    loopVariableName,
    loopCount,
    pageLoadTimeout,
    implicitlyWaitTimeout,
    url,
    proxy,
    otherConfig,
  });
</script>

<style lang="less" scoped></style>
